<template>
  <div id="login_id">
      <div class="borderd">
          <div class="form_panel">
              <div class="top">
                  优质甄选 高枕无忧
              </div>
              <div class="form"> 
                  <p class="input-item">
                      <input type="text" placeholder="请输入您的用户名" v-model.trim="form_data.username">
                  </p>
                  
                  <p class="input-item">
                      <input type="password"  placeholder="请输入相应的密码" v-model.trim="form_data.password">
                  </p>
                  <p  class="input-item">
                      <button type="button" @click="submit">登录</button>
                  </p>
              </div>  
          </div>
      </div>
  </div>
</template>

<script>
export default {
    //获取form表单数据
    data(){
        return {
            form_data:{
                username: "admin",
                password: "admin888"
            }
        }
    },
    methods:{
        submit(){
            //校验数据
            if(this.form_data.username === ""){
                return alert("用户名不可以为空")
            }
            if(this.form_data.password === ""){
                return alert("密码不可以为空")
            }
            this.$http.post("/api/userlogin",this.form_data).then(res=>{
                if(res.code === 200){
                    //存储登录状态
                    var login_data = JSON.stringify(res.list)
                    localStorage.setItem("login_data",login_data)
                    //发起跳转
                    this.$router.replace("/index")
                }   
            })
        }
    }

}
</script>

<style>
    #login_id{
        width: 100%; /* 100vw */ 
        height: 100vh;
        background-image: linear-gradient(to bottom,#FF5D3E,#eb8b7a);
    }
    #login_id .borderd{
        width: 600px;
        height: 600px;
        position: absolute;
        right: 200px;
        top: 100px;
        background: url('../assets/img/loginbg.png') no-repeat center center;
        background-size: 100%;
    }
    #login_id .form_panel{
        width: 300px;
        height: 400px;
        position: absolute;
        top: 120px;
        right: 25px;
    }
    #login_id .top{
        width: 300px;
        height: 100px;
        background: url('../assets/img/logo.png') no-repeat center center;
        background-size: 100%;

        text-align: center;
        line-height: 250px;
        letter-spacing: 10px;
        color: #AAA8A8;
    }
    #login_id .form{
        width: 300px;
        margin-top: 90px;
    }
    #login_id .input-item{
        margin-bottom: 40px;
    }
    #login_id .input-item>input{
        width: 100%;
        border: none;
        border-bottom: 1px solid #FF5D3E;
        outline: none;
        background-color: #FFF4F2;
        line-height: 30px;
    }
    #login_id .input-item>button{
        width: 100%;
        border: none;
        background-color: #FF5D3E;
        color: #FFF;
        outline: none;
        line-height: 30px;
        border-radius: 15px;
    }
</style>